<template>
<div>
  <div class="item">
    <div class="whisper-title" >
      <i class="el-icon-date"></i>
      <span class="hous">{{ hourstime }}</span>
      <span class="data">{{ Datatime }}</span>
    </div>
    <p class="text-cont">{{ textcontdata }}</p>
    <div class="img-box" >
      <img src="../assets/sy_img1.jpg" alt="">
    </div>
    <like></like>
    <div class="eait">
      <i class="el-icon-chat-dot-round" @click="Unfold1">{{ this.ctdata.length }}</i>
    </div>
    <div class="open" @click="Unfold1">
      <el-button type="text">{{ open }}</el-button>
      <i class="el-icon-arrow-down"></i>
    </div>
  </div>
  <div>
    <div class="review-version" v-show="show">
      <div class="from">
        <img src='../assets/ae29acd700da7cce74d7ffcb3511295b.jpeg' alt="">
        <div class="from_item">
          <el-form>
            <el-form-item>
              <el-input type="textarea" v-model="desc"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="input-block">
          <el-button type="primary" @click="huoqu" :disabled='dis'>{{ sure }}</el-button>
        </div>
      </div>
        <div class="list-cont" >
          <div class="cont" v-for="(item, index) in ctdata" :key="index">
            <div class="img">
              <img :src=Avatardata alt="">
              <span class="name">{{ name }}</span>
              <span class="data">{{ Datatime }}</span>
              <p class="ct">{{ ctdata[index] }}</p>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>
</template>

<script>
import like from './like.vue'
export default {
  data () {
    return {
      list: [],
      zan: 10,
      flg: false,
      pinglun: 60,
      show: false,
      dis: true,
      b: 0,
      open: '展开',
      sure: '確定',
      textcontdata: '一直听说牛油果吃起来像肥皂、肥肉，虽然很难吃，但是价格却很贵，我还是想尝试一下。今天公司新到了新西兰牛油果，这是新西兰牛油果是第一次在中国上市，个头比普通牛油果大了一倍，被誉为“超牛果”。好奇心驱使我尝了一颗，第一次吃牛油果没有见识，切开牛油果费了好大劲，切成了这样。',
      desc: '',
      formdata: '../assets/ae29acd700da7cce74d7ffcb3511295b.jpeg',
      name: '胡歌',
      ctdata: ['敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！', '敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！', '敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！', '敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！', '敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！']
    }
  },
  comments: {
    like
  },
  methods: {
    open_block () {
      this.show = !this.show
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    Unfold1 (index) {
      this.show = !this.show
      console.log(index)
      if (this.show) {
        this.open = '收起'
      } else {
        this.open = '展开'
      }
    },
    huoqu () {
      this.ctdata.unshift(this.desc)
      if (this.ctdata.length) {
        this.desc = ''
      }
      console.log(this.ctdata)
    },
    dianzan () {
      this.flg = !this.flg
      if (this.flg) {
        this.zan++
      } else {
        this.zan--
      }
    }
  },
  computed: {
    Datatime () {
      var atime = new Date()
      return atime.getFullYear() + '/' + (atime.getMonth() + 1) + '/' + atime.getDate()
    },
    hourstime () {
      var atime = new Date()
      return atime.getHours() + ':' + atime.getMinutes()
    }
  },
  watch: {
    desc () {
      if (this.desc === '') {
        this.dis = true
      } else {
        this.dis = false
      }
    }
  }
}
</script>

<style>
.item {
  padding: 50px 46px 20px 54px;
}
.hous{
  margin-right: 5px;
  margin-left: 5px;
}
.whisper-title span {
  color: #ff7f21;
  font-size: 10px;
}
.whisper-content .whisper-list .text-cont {
  line-height: 24px;
  margin-bottom: 28px;
}
.item p{
  font-size: 14px;
}
.img-box{
  margin: 30px 0 30px 0;
}
.dian{
  color: #ff7f21
}
.iconfont{
  cursor: pointer;
}
.eait {
  position: relative;
  left: 50px;
  bottom: 21px;
}
.el-icon-chat-dot-round{
  cursor: pointer;
}
.open{
  position: relative;
  float: right;
  margin-right: 5px;
  bottom: 30px;
}
.open span{
  font-size: 14px;
}
.review-version{
  padding: 20px;
  border-top: 1px dashed #dddddd;
}
.el-textarea{
  margin-top: 25px;
  margin-left: 60px;
  width: 680px;
}
.from img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  top: 30px;
}
/* .from img{
  position: relative;
  right: 10px;
} */
.from_item{
  position: relative;
  bottom: 50px;
}
.input-block{
  position: relative;
  bottom: 50px;
  margin-left: 630px;
}
.list-cont{
  border-bottom: 1px solid #e5e5e5;
  /* height: 100%; */
}
.img{
  margin-left: 55px;
}
.img img{
  position: relative;
  right: 60px;
}
.img .name{
  font-size: 14px;
  position: relative;
  right: 40px;
  /* bottom: 35px; */
}
.img .data{
  font-size: 14px;
  margin-left: 500px;
  position: absolute;
}
</style>
